<template>
  <div id="user">
    <Home>
      <el-table
        :data="
          tableData.filter(
            (data) =>
              !search || data.name.toLowerCase().includes(search.toLowerCase())
          )
        "
        style="width: 100%"
      >
        <el-table-column label="ID" prop="id"> </el-table-column>
        <el-table-column label="账号" prop="username"> </el-table-column>
        <el-table-column label="姓名" prop="name"> </el-table-column>
        <el-table-column label="头像">
          <template slot-scope="scope">
            <el-popover placement="top-start" title="" trigger="hover">
              <img
                :src="scope.row.avatar"
                alt=""
                style="width: 150px; height: 150px"
              />
              <img
                slot="reference"
                :src="scope.row.avatar"
                style="width: 30px; height: 30px"
              />
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="手机" prop="phone"> </el-table-column>
        <el-table-column label="性别" prop="sex"> </el-table-column>
        <el-table-column label="状态" prop="frozen"> </el-table-column>
         <el-table-column label="创建时间" prop="created_at"> </el-table-column>
        <el-table-column align="right">
          <!-- <template slot="header" slot-scope="scope">
            <el-input
              v-model="search"
              size="mini"
              placeholder="输入关键字搜索"
            /> -->
          </template>
          <template slot-scope="scope">
            <el-button
              size="mini"
              v-if="scope.row.frozen == '冻结'"
              @click="frozenUserOut(scope.$index, scope.row)"
              >解冻</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="frozenUser(scope.$index, scope.row)"
              v-else
              >冻结</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="sizes,prev, pager, next"
        :total="total"
        :page-size="pageOption.limit"
        :page-sizes="[2, 5, 10]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="pageOption.page"
      >
      </el-pagination>
    </Home>
  </div>
</template>

<script>
import Home from "../components/Home";
import { userPage, frozenUser, frozenUserOut } from "../network/user";
import moment from 'moment'

export default {
  name: "User",
  components: {
    Home,
  },
  data() {
    return {
      tableData: [],
      search: "",
      pageOption: {
        page: 1,
        limit: 2,
      },
      total: 0,
    };
  },
  created() {
    this.getUserPage();
  },
  methods: {
    getUserPage() {
      userPage(this.pageOption).then((res) => {
        this.tableData = res.data.data.rows;
        this.total = res.data.data.count;
        console.log(this.total);
        this.tableData.forEach((item) => {
          item.created_at = moment( item.created_at).format("YYYY-MM-DD")
          if (item.frozen == 1) {
            item.frozen = "冻结";
          } else {
            item.frozen = "正常";
          }
        });
      });
    },
    frozenUser(index, row) {
      this.$confirm("此操作将冻结该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          frozenUser({ u_id: row.id }).then((res) => {
            if (res.data.code == 200) {
              this.tableData[index].frozen = "冻结";
              this.$message({
                message: "该用户已被冻结",
                type: "success",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消冻结",
          });
        });
    },
    frozenUserOut(index, row) {
      //console.log(index, row.id);
           this.$confirm("此操作将解冻该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          frozenUserOut({ u_id: row.id }).then((res) => {
            if (res.data.code == 200) {
              this.tableData[index].frozen = "正常";
              this.$message({
                message: "该用户已解冻",
                type: "success",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消解冻",
          });
        });
    },
    handleSizeChange(val) {
      console.log(val);
      this.pageOption.limit = val;
      this.getUserPage();
    },
    handleCurrentChange(val) {
      this.pageOption.page = val;
      this.getUserPage();
    },
  },
  computed: {},
};
</script>

<style scoped>
.el-pagination {
  margin-top: 20px;
}
</style>